<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>go健身</title>

	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- <script type="text/javascript" data-framework src="/webApp/js/common/raven.min.js" crossorigin="anonymous"></script> -->


	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/elementui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/elements.css" >
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/train_banner_429adde.css" >
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/components_9031f76.css" >
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/personal_nav_5b79317.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/classroom_a85a9c7.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/common_dbbbd09.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/lineariconss.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/bootstraps.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/mains.css">
	<script  src="${pageContext.request.contextPath}/style/js/bootstrap.js"></script>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/style/css/bootstrap.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/style/css/dashboard.css">

	<style type="text/css">
		[v-cloak] {
			display: none;
		}

		.training_activity_list_header {
			background-image:url(${pageContext.request.contextPath}/style/images/ct.jpg);
			background-repeat: no-repeat;
			background-size:  1140px 100%;
			background-position:140px 0px ;
		}
	</style>
	<script>
		if (${empty sessionScope.user}) {
			window.location.href='${pageContext.request.contextPath}/login/userLogin.jsp';
		}
	</script>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/main_269e229.css">
</head>
<body>
<div id="app" style="position: relative; min-height: calc(100vh - 195px);">
	<div class="header_box">
		<header id="header">
			<%--		<div class="header-top">
                        <div class="container">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-md-4 col-4 header-top-left no-padding">
                                  <a href="mailto:support@colorlib.com"><span class="lnr lnr-location"></span></a>
                                  <a class="contact-texts" href="mailto:support@colorlib.com">support@colorlib.com</a>
                                </div>
                                <div class="col-md-4 col-4 header-top-bottom no-padding">
                                  <a href="index1.jsp"><img class="img-fluid" src="${pageContext.request.contextPath}/page/img/logo.png" alt="" title="" /></a>
                                </div>
                                <div class="col-md-4 col-4 header-top-right no-padding">
                                  <a class="contact-texts" href="tel:+440 123 12 658 439">+440 123 12 658 439</a>
                                  <a href="tel:+440 123 12 658 439"><span class="lnr lnr-phone-handset"></span></a>
                                </div>
                            </div>
                        </div>
                  </div>--%>
			<div class="container main-menu">
				<div class="row align-items-center justify-content-center">
					<nav id="nav-menu-container">
						<ul class="nav-menu">
							<li class="menu-active"><a href="${pageContext.request.contextPath}/page/index1.jsp">首页</a></li>
							<li><a href="${pageContext.request.contextPath}/actionlibrary/actionlibrary.jsp">健身课程库</a></li>
							<li><a href="${pageContext.request.contextPath}/page/services.jsp">特设课堂</a></li>
							<li><a href="${pageContext.request.contextPath}/page/trainers.jsp">图库</a></li>
							<li class="menu-has-children"><a href="">更多</a>
								<ul>
									<li><a href="${pageContext.request.contextPath}/front/FavoritePage.jsp">我的收藏</a></li>
									<li><a href="${pageContext.request.contextPath}/front/HistoryPage.jsp">历史记录</a></li>
								</ul>
							</li>
							<li><a href="${pageContext.request.contextPath}/page/elements.jsp">联系我们</a></li>
							<li><a href="${pageContext.request.contextPath}/page/contact.jsp">关于我们</a></li>
							<li>


								<div class="item-group" id="me">

								</div>
							</li>
						</ul>
					</nav><!-- #nav-menu-container -->
				</div>
			</div>
		</header><!-- #header -->
	</div>
	<main style="padding-top: 0px">
		<header>
			<div class="training_activity_list_header" />

			<div class="training_activity_list_header_ware"></div>
			<div class="training_activity_list_userinfo"><img src="${pageContext.request.contextPath}/FileDownloadServlet?fileName=${sessionScope.user.userImg}"
															  onerror='this.src="${pageContext.request.contextPath}/style/images/titlel.jpg"'  class="training_activity_list_portrait">
				<div class="training_activity_list_nickname left">${sessionScope.user.userName}</div>

			</div>
			<c:if test="${sessionScope.user.vipState == '1'}">
				<img src="${pageContext.request.contextPath}/style/images/vip11.png" style="height: 20px;position: absolute;top: 113px;left: 215px;">
			</c:if>
		</header>
		<article>
			<div class="training_activity_list_main clearfix">
				<div class="personalNav">
					<ul>
						<li><a href="${pageContext.request.contextPath}/front/CenTer.jsp" class="co_333"><span
								class="iconfont icon-play p_ibm Mrt20 Mlf30"></span> <span>我的作品</span></a>
						</li>
						<li><a href="${pageContext.request.contextPath}/front/FavoritePage.jsp" class="co_333"><span
								class="iconfont icon-homework p_ibm Mrt20 Mlf30"></span>
							<span>收藏</span></a></li>
						<li><a href="${pageContext.request.contextPath}/front/HistoryPage.jsp"
											   class="co_333"><span class="iconfont icon-teach p_ibm Mrt20 Mlf30"></span>
							<span>历史记录</span></a></li>
						<li class="checkon"><a href="#" class="co_333"><span
								class="iconfont icon-course p_ibm Mrt20 Mlf30"></span> <span>账号设置</span></a>
						</li>
						<li><a href="${pageContext.request.contextPath}/front/PublishVideo.jsp" class="co_333"><span
								class="iconfont icon-hand_edit p_ibm Mrt20 Mlf30"></span>
							<span>作品发布</span></a></li>
						<li><a href="${pageContext.request.contextPath}/front/PayMembers.jsp" class="co_333"><span
								class="iconfont icon-admin p_ibm Mrt20 Mlf30"></span>
							<span>充值服务</span></a></li>
						<li id="exitUser"><a href="#" class="co_333"><span
								class="iconfont icon-setup p_ibm Mrt20 Mlf30"></span>
							<span>退出登入</span></a></li>

					</ul>
				</div>
				<div class="training_activity_list_detailed">
					<div class="training_activity_list_detailed_nav clearfix">
						<ul class="left">
							<li class="lable active " id="imgUp">头像设置</li>
							<li class="lable" id="pwdUp">密码设置</li>
						</ul>
						<div class="right iconfont icon-edit2 hover_pointer"></div>
					</div>
					<div class="Mtp20" >
						<div class="user_info_box" style="" id="cons">
							<div class="Ptp20">
								<div class="p_ibt">
									<div class="jcrop-holder"
										 style="width: 200px; height: 200px; position: relative; background-color: black;display:inline;">
										<input type="radio" class="jcrop-keymgr"
													 style="position: fixed; left: -120px; width: 12px;">
										<img id="imgs" src="${pageContext.request.contextPath}/FileDownloadServlet?fileName=${sessionScope.user.userImg}"
											 onerror='this.src="${pageContext.request.contextPath}/style/images/titlel.jpg"'  class="user_head"
											 style="width: 200px; height: 200px; border: none; visibility: visible; margin: 0px; padding: 0px;border-radius:100px; position: absolute; top: 0px; left: 0px; display: inline-block; opacity: 0.6;">
									</div>
									<div class="jcrop-holder"
										 style="width: 200px; height: 200px; position: relative; background-color: black;display:inline;left: 250px;">
										<input type="radio" class="jcrop-keymgr"
													 style="position: fixed; left: -120px; width: 12px;"><img
											 class="user_head" id="img"
											style="width: 200px; height: 200px; border: none; visibility: visible; margin: 0px; padding: 0px;border-radius:100px; position: absolute; top: 0px; left: 0px; display: inline-block; opacity: 0.6;">
									</div>
								</div>
								<div class="p_ibt Mlf20"><canvas id="canvas" width="200" height="200" class="canvas"></canvas></div>
							</div>
							<div class="Ptp20">
								<form id="imgForm" >
								<div class="p_ibt el_upload_head">
									<div tabindex="0" class="el-upload el-upload--text"><button type="button" id="test9" onclick="getFile()"
																								class="el-button el-button--primary el-button--small is-round">
										<!----><span>选择头像</span>
									</button><input type="file" id="gfs" name="file" class="el-upload__input" style="display: none;"  onchange="show(this.files)"></div>
								</div> <button type="button" class="el-button Mlf20 el-button--primary el-button--small is-round" id="suBthss">
								<!---->
								<!----><span>保存头像
								</span>
							</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="Center Pbm30" style="display: none;">
				<div class="outcomePage el-pagination"><span class="el-pagination__total">共 2 条</span><button
						type="button" disabled="disabled" class="btn-prev"><span>上一页</span></button>
					<ul class="el-pager">
						<li class="number active">1</li>
					</ul><button type="button" disabled="disabled" class="btn-next"><span>下一页</span></button>
				</div>
			</div>
		</article>
	</main>
	<input type="hidden" id="dates" value="">
</div>

<script type="text/javascript" data-loader="" src="${pageContext.request.contextPath}/style/js/config_b47c63a.js"></script>
<script type="text/javascript" data-loader="" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script type="text/javascript" data-loader="" src="${pageContext.request.contextPath}/style/js/remoteCall_77ab826.js"></script>
<script type="text/javascript" data-loader="" src="${pageContext.request.contextPath}/style/js/lodash.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/vue_63f7cd8.js"></script>
<script type="text/javascript" data-loader="" src="${pageContext.request.contextPath}/style/js/util_fad37ea.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/elementui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/train_banner_66263da.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/components_52f8782.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/personal_nav_be8c381.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/classroom_63b138d.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/personal_87e9220.js"></script>

<script>
	document.write('<script src="//' + (location.host || 'localhost').split(':')[0] +
			':35929/livereload.js?snipver=1"></' + 'script>')
</script>
<script src="//127.0.0.1:35929/livereload.js?snipver=1"></script>

<script type="text/javascript">
	$(function () {

		$(".lable").click(function () {
			$(".lable").removeClass("active");
			$(this).addClass("active");
			$("#dates").val($(this).attr("data-limit"));

		})

		/*
		* 修改图片点击事件
		* */
		$(document).on("click","#suBthss",function () {
			if($("#gfs").val() == "")
			{
				alert("请选择");
			}
			else{
				var file = $("#gfs").val();
				var len = file.length;
				var ext = file.substring(len-4,len).toLowerCase();
				if(ext == ".jpg" || ext == ".png") {
					var formData = new FormData($('#imgForm')[0]);
					$.ajax({
						type: 'post',
						url: "${pageContext.request.contextPath}/UserPersonageController/updateUserImg", //上传文件的请求路径必须是绝对路劲
						data: formData,
						cache: false,
						processData: false,
						contentType: false,
						success:function (data) {
							if (data) {
								alert("上传成功");
								location.href="${pageContext.request.contextPath}/front/UpdateInfo.jsp";
							} else {
								alert("上传失败");
							}
						},
						error:function () {
							alert("上传失败");
						}
					})
				} else{
					alert("不是图片 请重新选择");
				}
			}
		})

		/*
		* 修改密码点击事件
		* */
		$(document).on("click","#upBths",function () {
			var passw = $("#passw").val();
			var newPassw = $("#newPassw").val();
			var newPasswT = $("#newPasswT").val();
			if (passw == "" || newPassw == "" || newPasswT == "") {
				alert('内容不可为空');
			} else if (newPassw != newPasswT) {
				$("#newPassw").val("");
				$("#newPasswT").val("");
				alert("两次密码不一致");
			} else {
				$.post("${pageContext.request.contextPath}/UserPersonageController/updateUserPassword",{password:passw,newPassword:newPassw}, function (data) {
					if (data){
						location.href="${pageContext.request.contextPath}/login/userLogin.jsp";
					} else {
						alert("修改失败");
					}
				})
			}
		})

		$("#exitUser").click(function () {
			var leep = confirm("确认退出");
			if(leep) {
				$.getJSON("${pageContext.request.contextPath}/UserPersonageController/exitUser", function (data) {
					location.href="${pageContext.request.contextPath}/login/userLogin.jsp";
				})
			}
		})
	})

	/**
	 * 显示图片
	 */
	function show(f) {
		var str = "";
		for (var i = 0; i < f.length; i++) {
			var reader = new FileReader();
			reader.readAsDataURL(f[i]);
			reader.onload = function (e) {
				str += "<img src='"+e.target.result+"' class='user_head' style='width: 200px; height: 200px; border: none; visibility: visible; margin: 0px; padding: 0px;border-radius:100px; position: absolute; top: 0px; left: 0px; display: inline-block; opacity: 0.6;'>";

				$("#img").attr("src",e.target.result);
			}
		}
	}


	/**
	 * 选择文件点击事件
	 */
	function getFile() {
		$("#gfs").click();
	}

	/**
	 * 切换修改图片点击事件
	 */
	$("#imgUp").click(function () {
		$("#cons").html('<div class="Ptp20">\n' +
				'\t\t\t\t\t\t\t\t<div class="p_ibt">\n' +
				'\t\t\t\t\t\t\t\t\t<div class="jcrop-holder"\n' +
				'\t\t\t\t\t\t\t\t\t\t style="width: 200px; height: 200px; position: relative; background-color: black;display:inline;">\n' +
				'\t\t\t\t\t\t\t\t\t\t<input type="radio" class="jcrop-keymgr"\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t\t style="position: fixed; left: -120px; width: 12px;">\n' +
				'\t\t\t\t\t\t\t\t\t\t<img id="imgs" src="${pageContext.request.contextPath}/FileDownloadServlet?fileName=${sessionScope.user.userImg}"\n' +
				'\t\t\t\t\t\t\t\t\t\t\t onerror=\'this.src="${pageContext.request.contextPath}/style/images/titlel.jpg"\'  class="user_head"\n' +
				'\t\t\t\t\t\t\t\t\t\t\t style="width: 200px; height: 200px; border: none; visibility: visible; margin: 0px; padding: 0px;border-radius:100px; position: absolute; top: 0px; left: 0px; display: inline-block; opacity: 0.6;">\n' +
				'\t\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t\t<div class="jcrop-holder"\n' +
				'\t\t\t\t\t\t\t\t\t\t style="width: 200px; height: 200px; position: relative; background-color: black;display:inline;left: 250px;">\n' +
				'\t\t\t\t\t\t\t\t\t\t<input type="radio" class="jcrop-keymgr"\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t\t style="position: fixed; left: -120px; width: 12px;"><img\n' +
				'\t\t\t\t\t\t\t\t\t\t\t class="user_head" id="img"\n' +
				'\t\t\t\t\t\t\t\t\t\t\tstyle="width: 200px; height: 200px; border: none; visibility: visible; margin: 0px; padding: 0px;border-radius:100px; position: absolute; top: 0px; left: 0px; display: inline-block; opacity: 0.6;">\n' +
				'\t\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t<div class="p_ibt Mlf20"><canvas id="canvas" width="200" height="200" class="canvas"></canvas></div>\n' +
				'\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t<div class="Ptp20">\n' +
				'\t\t\t\t\t\t\t\t<form id="imgForm" >\n' +
				'\t\t\t\t\t\t\t\t<div class="p_ibt el_upload_head">\n' +
				'\t\t\t\t\t\t\t\t\t<div tabindex="0" class="el-upload el-upload--text"><button type="button" id="test9" onclick="getFile()"\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass="el-button el-button--primary el-button--small is-round">\n' +
				'\t\t\t\t\t\t\t\t\t\t<!----><span>选择头像</span>\n' +
				'\t\t\t\t\t\t\t\t\t</button><input type="file" id="gfs" name="file" class="el-upload__input" style="display: none;"  onchange="show(this.files)"></div>\n' +
				'\t\t\t\t\t\t\t\t</div> <button type="button" class="el-button Mlf20 el-button--primary el-button--small is-round" id="suBthss">\n' +
				'\t\t\t\t\t\t\t\t<!---->\n' +
				'\t\t\t\t\t\t\t\t<!----><span>保存头像\n' +
				'\t\t\t\t\t\t\t\t</span>\n' +
				'\t\t\t\t\t\t\t</button>\n' +
				'\t\t\t\t\t\t\t\t</form>\n' +
				'\t\t\t\t\t\t\t</div>');
	})

	/**
	 * 切换修改密码点击事件
	 */
	$("#pwdUp").click(function () {
		$("#cons").html('<div class="user_info_box" style="">\n' +
				'\t\t\t<div class="user_pwd Ptp20"><span class="p_ibm wido10">旧密码：</span>\n' +
				'\t\t\t\t<div class="wid200 el-input">\n' +
				'\t\t\t\t\t<input type="password" autocomplete="off" placeholder="请输入旧密码" id="passw" class="el-input__inner">\n' +
				'\t\t\t\t</div>\n' +
				'\t\t\t</div>\n' +
				'\t\t\t<div class="user_pwd"><span class="p_ibm wido10">新密码：</span>\n' +
				'\t\t\t\t<div class="wid200 el-input">\n' +
				'\t\t\t\t\t<input type="password" autocomplete="off" placeholder="请输入新密码" id="newPassw" class="el-input__inner">\n' +
				'\t\t\t\t</div>\n' +
				'\t\t\t</div>\n' +
				'\t\t\t<div class="user_pwd"><span class="p_ibm wido10">确认新密码：</span>\n' +
				'\t\t\t\t<div class="wid200 el-input">\n' +
				'\t\t\t\t\t<input type="password" autocomplete="off" placeholder="请输入新密码" id="newPasswT"  class="el-input__inner">\n' +
				'\t\t\t\t</div>\n' +
				'\t\t\t</div>\n' +
				'\t\t\t<div><button type="button" id="upBths" class="el-button el-button--primary el-button--small is-round">\n' +
				'\t\t\t\t\t<span>保 存</span>\n' +
				'\t\t\t\t</button></div>\n' +
				'\t\t</div>');
	})


</script>
</body>

</html>
